<template>
  <div class="header">
    <div class="title">{{ msg }}</div>
    <ul class="model">
      <li v-for="(item, index) in modelData" :key="index">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Header--test'
    }
  },
  computed: {
    ...mapState('menu', [
      'modelData'
    ])
  },
  created () {
    console.log('Header:', this.modelData)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header{
  position: relative;
  top: 0;
  left: 0;
  line-height: 70px;
  width: 100%;
  height: 70px;
  background-color: #232323;
  color: #ffffff;
}
.title{
  float: left;
}
.model{
  float: right;
  color: #ffffff;
}
.model>li{
  float: left;
  margin-right: 30px;
}
</style>
